<template>
  <el-dialog
    title="共享文件"
    :close-on-click-modal="false"
    :visible.sync="visible"
    class="jsbos-dialog jsbos-dialog_center transfer-dialog"
    lock-scroll
    width="800px"
  >
    <el-row>
      <span
        style="
          margin: 8px 0 0 4px;
          color: rgba(255, 0, 0, 0.72);
          font-weight: 600;
          font-size: large;
        "
      >
        注意:
      </span>
      <span style="margin: 8px 0 0 4px">
        单击短链接可复制！内部链接只可添加一个，可在编辑中更改共享人员。
      </span>
      <el-button
        type="primary"
        @click="addOrUpdateLink()"
        size="small"
        style="margin-bottom: 10px; float: right"
        >添加链接</el-button
      >
    </el-row>

    <jsbos-table
      v-loading="listLoading"
      :data="list"
      width="800px"
      min-height="200px"
      @cell-click="handleDblClick"
    >
      <!-- :show-overflow-tooltip="true" -->

      <el-table-column
        prop="exposeLink"
        label="短链接"
        width="300px"
        align="left"
      >
        <!-- <template slot-scope="scope">
          <span>
            <i class="el-icon-copy-document"></i>{{ scope.row.exposeLink }}
          </span>
        </template> -->
      </el-table-column>
      <el-table-column prop="shareType" label="共享类型" width="0" align="left">
        <template slot-scope="scope">
          <span>
            {{ scope.row.shareType == "1" ? "内部" : "对外" }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="password"
        label="认证方式"
        width="0"
        align="left"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <span>
            {{ scope.row.password == "1" ? "无" : scope.row.password }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="endTime" label="截止时间" width="120" align="left">
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="150">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="addOrUpdateLink(scope.row.id)"
            >编辑</el-button
          >
          <el-button size="mini" type="text" @click="goDetail(scope.row.id)"
            >详情</el-button
          >
          <el-button
            size="mini"
            type="text"
            class="jsbos-table-delBtn"
            @click="handleDel(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </jsbos-table>
    <!-- 单击复制需要改输入框，隐藏了 -->
    <textarea
      id="input"
      style="position: absolute; top: 0; left: 0; opacity: 0; z-index: -10"
    >
这是幕后黑手</textarea
    >
    <addLink
      v-if="addLinkVisible"
      ref="addLink"
      @refresh="refreshShareUserList"
    />
    <Detail v-if="detailVisible" ref="detail" />
  </el-dialog>
</template>

<script>
import {
  ShareCreate,
  ShareUserList,
  handleDelShareLink,
} from "@/api/extend/document";
import userTransfer from "@/components/user-transfer";
import addLink from "./AddLink.vue";
import Detail from "./Detail.vue";
export default {
  components: { userTransfer, addLink, Detail },
  data() {
    return {
      detailVisible: false,
      addLinkVisible: false,
      listLoading: false,
      visible: false,
      documentId: "",
      treeData: [],
      checkedKeys: [],
      list: [],
      total: 0,
      listQuery: {
        currentPage: 1,
        pageSize: 20,
        sort: "asc",
        sidx: "creatorTime",
      },
    };
  },
  methods: {
    // 双击表格复制内容
    handleDblClick(row, column, cell, event) {
      console.log(row);
      console.log(column);
      if (column.property == "exposeLink") {
        var text = event.target.innerText;
        if (row.shareType == "2" && row.password != "1") {
          text += "   链接密码：" + row.password;
        }
        var input = document.getElementById("input");
        input.value = text; // 修改文本框的内容
        input.select(); // 选中文本
        document.execCommand("copy"); // 执行浏览器复制命令

        this.$notify.success({
          title: `${text}`,
          message: `已复制到剪贴板`,
          // showClose: false
        });
      }
    },
    //删除
    handleDel(id) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        type: "warning",
      }).then(() => {
        handleDelShareLink(id).then((res) => {
          this.$message({
            type: "success",
            message: res.msg,
            onClose: () => {
              this.refreshShareUserList();
            },
          });
        });
      });
    },
    //详情
    goDetail(id) {
      this.detailVisible = true;
      this.$nextTick(() => {
        this.$refs.detail.init(id);
      });
    },
    //新增或者编辑
    addOrUpdateLink(shareId) {
      this.addLinkVisible = true;

      this.$nextTick(() => {
        if (shareId) {
          this.$refs.addLink.init(this.documentId, shareId);
        } else {
          this.$refs.addLink.init(this.documentId);
        }
      });
    },
    init(id) {
      if (!id) return;
      this.documentId = id;
      this.visible = true;
      this.listLoading = true;
      ShareUserList(id).then((res) => {
        let data = this.arrayUnique(res.data.list);
        data.forEach((i) => {
          i.endTime = this.jsbos.dateFormat(i.endTime);
        });
        this.list = data;
        this.listLoading = false;
      });
    },
    refreshShareUserList() {
      this.listLoading = true;
      ShareUserList(this.documentId).then((res) => {
        let data = this.arrayUnique(res.data.list);
        data.forEach((i) => {
          i.endTime = this.jsbos.dateFormat(i.endTime);
        });
        this.list = data;
        this.listLoading = false;
      });
    },
    arrayUnique(arr) {
      let num = 0;
      let newArr = [];
      arr.forEach((i) => {
        if (i.shareType == "1" && num === 0) {
          newArr.push(i);
          num++;
        } else if (i.shareType == "2") {
          newArr.push(i);
        }
      });
      let arrayOrder = newArr.sort(function (a, b) {
        return b.creatorTime - a.creatorTime;
      });
      return arrayOrder;
    },
  },
};
</script>
